<template>
  <div>
    <el-row>
      <el-col :span="16">
        <el-card class="box-card">
          <sysroleHome @rowclick="showRoleMenu($event)" />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <el-button size="mini" type="primary" @click="doSaveMenus"
            >保存</el-button
          >
          <el-tree
            style="height:300px;overflow:auto;"
            ref="menuTree"
            :props="props"
            :data="treeData"
            node-key="id"
            show-checkbox
          >
          </el-tree>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import sysroleHome from "./sysroleHome.vue";
import { sysmenuService, sysroleService } from "../../../api/apiService";

export default {
  components: {
    sysroleHome
  },
  data() {
    return {
      roleId: "",
      props: {
        label: "label",
        children: "children"
      },
      treeData: []
    };
  },

  methods: {
    doSaveMenus() {
      let menuIds = this.$refs.menuTree.getCheckedKeys();
      let params = {
        roleId: this.roleId,
        menuIds
      };
      sysroleService.saveRoleMenus(params);
    },

    showRoleMenu(item) {
      this.roleId = item.oid;
      sysroleService.getMenusByRole(this.roleId).then(res => {
        console.log(res);
        let { data } = res;
        this.$refs.menuTree.setCheckedKeys(data);
      });
    },
    loadTree() {
      sysmenuService.tree().then(res => {
        let { data } = res;
        this.treeData = data;
      });
    }
  },
  mounted() {
    this.loadTree();
  }
};
</script>

<style scoped></style>
